<template>
  <div class="fixed-menu" ref="btn">
    <a>
      <div class="fixed-menu-item">
        <div @click="applyWin=!applyWin">
          <img src="@/static/imgs/financial_apply.png">
          <p>申请服务</p>
        </div>
        <transition name="el-zoom-in-center">
          <div class="form" :hidden="applyWin">
            <div class="close">
              <span style="width:30px;height:30px;" @click="applyWin=!applyWin">
                  <i class="el-icon-close"></i>
                </span>
            </div>
            <div class="form-content">
              <div class="form-header">
                <span class="form-title">您的信息</span>
                <span class="form-tip">我们会尽快给您回电</span>
              </div>
              <el-tooltip class="item" effect="dark" content="您的称呼" placement="top-start">
                <input v-model="form.name" placeholder="您的称呼 *">
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="联系电话" placement="top-start">
                <input v-model="form.mobile" placeholder="联系电话 *">
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="企业名称" placement="top-start">
                <input v-model="form.companyName" placeholder="企业名称 *">
              </el-tooltip>
              <textarea v-model="form.remark" placeholder="请填写您的疑问和关心的问题等"/>
              <el-button style="width:200px;" :loading="loading" type="primary"  @click="submit" >提交申请</el-button>
            </div>
          </div>
        </transition>
      </div>
    </a>
    <a>
      <div class="fixed-menu-item" style="margin-top:10px;" @click="goTop">
        <img src="@/static/imgs/go_top.png">
        <p>回到顶部</p>
      </div>
    </a>
  </div>
</template>
<script>
import api from '@/assets/api/applyService'
import validate from '@/assets/utils/validation'
let timer = null
export default {
  data () {
    return {
      isTop: true,
      form: {
        companyName: '',
        mobile: '',
        name: '',
        remark: ''
      },
      applyWin: true,
      loading: false

    }
  },
  mounted () {
    this.needScroll()
  },
  methods: {
    // 检测时是否在顶部
    needScroll () {
      // let clientHeight = document.documentElement.clientHeight
      // let obtn = this.$refs.btn
      window.onscroll = function () {
        // let osTop =
        //   document.documentElement.scrollTop || document.body.scrollTop
        // if (osTop >= clientHeight) {
        //   obtn.style.display = 'block'
        // } else {
        //   obtn.style.display = 'none'
        // }
        if (!this.isTop) {
          clearInterval(timer)
        }
        this.isTop = false
      }
    },
    // 回到顶部
    goTop () {
      timer = setInterval(function () {
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop
        let ispeed = Math.floor(-osTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed
        this.isTop = true
        if (osTop === 0) {
          clearInterval(timer)
        }
      }, 20)
    },
    // 提交申请
    submit () {
      let canSubmit =
        this.form.companyName && this.form.mobile && this.form.name
      if (canSubmit) {
        if (validate.isTelphoneNumber(this.form.mobile)) {
          this.loading = true
          api.postAdd(this.form).then(res => {
            this.applyWin = true
            this.loading = false
            this.$notify({
              title: '成功',
              type: 'success',
              message: '提交申请成功'
            })
          })
        } else {
          this.$notify({
            title: '提示',
            type: 'warning',
            message: '请填写正确手机号码'
          })
        }
      } else {
        this.$notify({
          title: '提示',
          type: 'warning',
          message: '请填写姓名、联系电话、企业名称'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.fixed-menu {
  position: fixed;
  bottom: 40px;
  right: 20px;
  width: 84px;
  height: 200px;
  .fixed-menu-item {
    width: 84px;
    height: 92px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #f5f5f5;
    border-radius: 4px;
    position: relative;
    img {
      margin-top: 18px;
      width: 24px;
      height: 30px;
    }
    p {
      margin-top: 16px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #757575;
      line-height: 14px;
    }
    .form {
      width: 350px;
      height: 500px;
      position: absolute;
      right: 100px;
      bottom: -120px;
      background: #ffffff;
      border: 1px solid #f5f5f5;
      border-radius: 4px;
      .close{
        display: flex;
        justify-content: flex-end;
        margin-top: 15px;
        margin-right: 15px;
      }
      .form-content {
        margin: 0px 30px 15px 30px;
        .form-header {
          height: 24px;
          margin-bottom: 40px;
          .form-title {
            font-weight: bold;
            font-size: 24px;
            color: #333333;
            letter-spacing: 1px;
            line-height: 24px;
          }
          .form-tip {
            margin-left: 19px;
            font-family: MicrosoftYaHei;
            font-size: 14px;
            color: #999999;
            letter-spacing: 0;
            line-height: 14px;
          }
        }
        input {
          width: 260px;
          height: 50px;
          padding-left: 18px;
          background: #ffffff;
          border: 1px solid #eeeeee;
          border-radius: 2px;
          font-size: 16px;
          font-family: MicrosoftYaHei;
          margin-bottom: 16px;
        }
        textarea {
          width: 260px;
          height: 50px;
          padding-left: 18px;
          background: #ffffff;
          border: 1px solid #eeeeee;
          border-radius: 2px;
          font-size: 16px;
          font-family: MicrosoftYaHei;
          margin-bottom: 16px;
        }
        .submit {
          margin-top: 26px;
          height: 50px;
          background-image: linear-gradient(-180deg, #f3d1b1 0%, #ceab7c 100%);
          border-radius: 4px;
          font-family: MicrosoftYaHei;
          font-size: 18px;
          color: #333333;
          letter-spacing: 0;
          line-height: 50px;
        }
      }
    }
  }
}
</style>
